<!--
 * @Date: 2023-03-13 15:35:18
 * @LastEditors: Zireael 1193875164@qq.com
 * @LastEditTime: 2023-03-14 15:26:59
 * @FilePath: \A19\frontend\src\components\Charts\LineChart.vue
-->
<template>
    <div ref="lineChartRef" class="chart-container"></div>
</template>

<script lang="ts" setup>
import { ref, defineProps, toRefs, watchEffect, onMounted, nextTick } from "vue";
import { echarts, ECOption } from "@/hooks/echarts/chartInitHook";
import { users } from "@/shared/types/user";
import { ECharts } from "echarts/core";

const props = defineProps<{
    homeworkDate:
    | {
        name: string;
        questions: number;
        userHomework: number[];
        _id: string;
    }[]
    | undefined;
    courseinfo:
    | {
        _id: string;
        student: users[];
        course: string;
    }[]
    | undefined;
    nameClicked:(a:any) => any,
    color:string[]
}>();
const { homeworkDate, courseinfo } = toRefs(props);

const lineChartRef = ref<HTMLDivElement>();
let lineChart: ECharts;

watchEffect(() => {
    if (!lineChartRef.value || !homeworkDate.value) return;
    lineChart = echarts.init(lineChartRef.value);

    const homeworkNames = homeworkDate.value.map(h => h.name)
    // const count = courseinfo.value!.length
    const data = homeworkDate.value.map(h =>{
        // console.log(h.userHomework.length   / count);
        
        return  h.userHomework.reduce((pre,cur,arr) =>{
            return {
                max:pre.max > cur?pre.max : cur,
                allSc:Math.round(pre.allSc + cur / h.userHomework.length),
            }
        },{max:0,allSc:0})
    })
    
    // console.log(data);
    // const max = homeworkDate.value.map(h =>{
    //     return h.userHomework.r
    // })

    const option = {
        title: {
            text:'分数统计',
            textStyle:{
                fontWeight:'normal',
                fontSize:16
            },
            top:'10%'
        },
        grid:{
            // show:true,
            top:'20%',
            bottom: '10%',
        },
        tooltip: {
            trigger:'axis',
            axisPointer:{
                type:'shadow'
            }
        },
        legend: {
            data: ['最高分','平均分'],
            top:'10%'
        },
        xAxis: {
            boundaryGap:true,
            data: homeworkNames,
            axisTick:{
                alignWithLabel:true
            }
        },
        yAxis: {
            name:'分数',
            nameLocation:'middle',
            nameGap:40,
            scale: true,
            nameTextStyle:{

            }
        },
        emphasis:{
            itemStyle: {
                opacity: 1
            },  
        },
        series: [
            {
                name: '最高分',
                type: 'line',
                data: data.map(d => d.max),
                // lineStyle:{
                //     color:'#'
                // },
                itemStyle:{
                    opacity:0
                }
            },
            {
                name: '平均分',
                type: 'line',
                data: data.map(d => d.allSc ),
                // lineStyle:{
                //     color:''
                // },
                itemStyle:{
                    opacity:0
                }
            },
        ],
        color:props.color,
    } as ECOption;

    // lineChart.getZr().off('mousemove')
    lineChart.getZr().on('mousemove', event => {
        const canvas = event.event.target as HTMLCanvasElement
        if (lineChart.containPixel('grid', [event.offsetX, event.offsetY])) {
            canvas.style.cursor = 'pointer'
        } else {
            canvas.style.cursor = ''
        }
    })
    lineChart.getZr().off('click')
    lineChart.getZr().on('click', event => {
        const pointInPixel = [event.offsetX, event.offsetY]
        if (lineChart.containPixel('grid', pointInPixel)) {
            // console.log(lineChart.convertFromPixel({
            // 	seriesIndex: 0
            // },pointInPixel));
            let xIndex = lineChart.convertFromPixel({
                seriesIndex: 0
            }, pointInPixel)[0]

            if(homeworkDate.value){
                props.nameClicked(homeworkDate.value[xIndex].name)
            }
        }
    })

    lineChart.setOption(option);
    // lineChart.off('click')
    // lineChart.on('click',(params)=>{
    //     props.nameClicked(params.name)
    // })

    
});


</script>

<style lang="less" scoped>
.chart-container {
    height: 100%;
    width: 100%;
    position: relative;
    // background-color: aqua;
}
</style>
